<!-- 
 ### Nuxt 3 客户端和服务器端的生命周期

Nuxt 3 是一个基于 Vue 3 的框架，用于构建服务端渲染（SSR）、静态站点生成（SSG）和单页应用（SPA）。它提供了丰富的生命周期钩子，帮助开发者在不同阶段执行特定逻辑。以下是 Nuxt 3 中客户端和服务器端的主要生命周期钩子。

#### 1. **全局生命周期钩子**

这些钩子适用于整个应用程序，无论是在客户端还是服务器端。

- **`nuxt.config.ts`**：配置文件中可以定义一些全局设置和插件。
  
- **`app.vue`**：根组件，可以在其中使用 `setup()` 函数来定义全局状态或逻辑。

```vue
<script setup>
import { onMounted, onBeforeUnmount } from 'vue';

onMounted(() => {
  console.log('App mounted');
});

onBeforeUnmount(() => {
  console.log('App before unmount');
});
</script>
```

#### 2. **页面级生命周期钩子**

每个页面组件都可以访问以下生命周期钩子：

- **`asyncData`**：在页面加载前获取数据，支持异步操作。仅在服务端和客户端首次加载时调用。

```javascript
export default definePageComponent({
  async asyncData({ $http }) {
    const data = await $http.$get('/api/data');
    return { data };
  },
});
```

- **`setup`**：用于初始化组件的状态和逻辑。

```vue
<script setup>
import { ref, onMounted } from 'vue';

const message = ref('Hello World');

onMounted(() => {
  console.log('Page mounted');
});
</script>
```

#### 3. **服务端生命周期钩子**

这些钩子仅在服务端调用，通常用于处理 SSR 或 SSG 相关的任务。

- **`serverMiddleware`**：定义自定义的中间件，在请求到达路由之前处理。

```typescript
// server/middleware/logging.ts
export default defineEventHandler((event) => {
  console.log('Request received:', event.node.req.url);
});
```

- **`fetch`**：在服务端和客户端都可用，但在服务端优先执行。适合用于预取数据。

```vue
<script setup>
const { data } = await useFetch('/api/data');
</script>
```

- **`defineNuxtPlugin`**：定义全局插件，可以在服务端和客户端注册。

```typescript
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('render:setup', (ctx) => {
    console.log('Render setup hook');
  });
});
```

#### 4. **客户端生命周期钩子**

这些钩子仅在客户端调用，通常用于处理交互逻辑或浏览器特有的功能。

- **`mounted`**：组件挂载后调用，适合用于 DOM 操作或初始化第三方库。

```vue
<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component mounted on client');
});
</script>
```

- **`beforeRouteEnter` 和 `beforeRouteLeave`**：导航守卫，用于在页面切换时执行逻辑。

```javascript
export default definePageComponent({
  setup() {
    onBeforeRouteLeave((to, from) => {
      console.log('Leaving page');
    });

    onBeforeRouteEnter((to, from) => {
      console.log('Entering page');
    });
  },
});
```

#### 5. **组合式 API 钩子**

Nuxt 3 支持 Vue 3 的组合式 API，提供了一些额外的钩子来增强开发体验。

- **`onMounted`、`onUnmounted`、`onBeforeMount` 等**：用于管理组件的生命周期。

```vue
<script setup>
import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  console.log('Component mounted');
});

onUnmounted(() => {
  console.log('Component unmounted');
});
</script>
```

- **`useAsyncData` 和 `useLazyAsyncData`**：用于异步获取数据，分别在服务端和客户端立即执行或延迟执行。

```vue
<script setup>
const { data, pending, error } = await useAsyncData('key', () => $fetch('/api/data'));
</script>
```

#### 6. **错误处理**

- **`error` 组件**：用于捕获和显示全局错误。

```vue
<template>
  <div v-if="error">
    <h1>Oops! Something went wrong.</h1>
    <p>{{ error.message }}</p>
  </div>
</template>

<script setup>
const props = defineProps(['error']);
</script>
```

- **`nuxt.error`**：在代码中手动触发错误。

```javascript
throw createError({ statusCode: 404, statusMessage: 'Page not found' });
```

### 总结

Nuxt 3 提供了丰富的生命周期钩子，涵盖了从全局到页面级别的各个层面，确保开发者能够在不同的上下文中执行特定的逻辑。通过合理使用这些钩子，可以有效地管理应用的状态、数据获取和错误处理，从而构建高效且可靠的 Web 应用程序。
-->
<template>
  <div class="lifecycle-nuxt">
    <h2>lifecycle-nuxt</h2>
  </div>
</template>

<script>
  export default {
    setup() {
      console.log("setup");
      return {};
    },
    beforeCreate() {
      console.log("beforeCreate");
    },
    created() {
      console.log("created");
    },
    beforeMount() {
      console.log("beforeMount");
    },
    mounted() {
      console.log("mounted");
    },
    beforeUnmount() {
      console.log("beforeUnmount");
    },
    unmounted() {
      console.log("unmounted");
    },
  };
</script>

<style lang="less" scoped>
  .lifecycle-nuxt {
  }
</style>
